<template>
  <!-- 物料管理 -->
  <div class="Project-box mateManent-box">
    <div class="mateManentTitle1 publicTiTle">物料管理</div>
    <div class="mateManentTitle2 publicETiTle">采摘入库</div>
    <div class="mateManentTitle3 publicETiTle">农作物采摘总量</div>
    <div class="mateManentTitle4 publicETiTle">肥料与植保产品</div>
    <div class="mateManentTitle5 publicETiTle">其他物料列表</div>
    <div class="mateManentUnit1 publicUnit">吨</div>
    <div class="mateManentUnit2 publicUnit">0000000</div>
    <div class="mateManentBox1">
      <Xialakuang :xialaList="xialaList" @belowEmits="belowEmits" />
    </div>
    <div class="mateManentBox2">
      <div class="Box2Image">
        <pieChartEcahrts :pieChartObj="pieChartObj" />
      </div>
      <div class="Box2Lender">
        <PieLender :PieLenderObj="PieLenderObj" />
      </div>
    </div>
    <div class="mateManentBox3">
      <div
        class="mateManentBox3-item"
        v-for="(item, index) in HorizontalChartObj.DataList"
        :key="index"
      >
        <HorizontalChart
          :name="item.name"
          :value="'50%'"
          :bgcolor="`linear-gradient(to right, ${bbb(index)}, ${bbb1(index)}`"
          :backgroundimg="aaa(index)"
          :Index="index"
        />
      </div>
    </div>
    <div class="mateManentBox4">
      <div class="box4T1">序号</div>
      <div class="box4T1">名称</div>
      <div class="box4T1">剩余</div>
      <div class="box4T1">图片</div>
      <div class="box4T1">操作</div>
    </div>
    <div class="mateManentBox5">
      <div class="InsectMBox5I" v-for="item in 10">
        <div class="box4T1 Globaloverflow">xxxxx xx</div>
        <div class="box4T1 Globaloverflow">xxxx</div>
        <div class="box4T1 Globaloverflow">xxxx</div>
        <div class="box4T1">
          <div class="box4T1Img">
            <el-image
              style="width: 100%; height: 95%; margin-top: 1%"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              :fit="fit"
            />
          </div>
        </div>
        <div class="box4T1 Globaloverflow">xxxx</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import Xialakuang from "@/components/xialakuang.vue"
import PieLender from "@/components/PieLender.vue"
import pieChartEcahrts from "@/components/pieChartEcahrtsCun.vue"
import HorizontalChart from "@/components/HorizontalChart.vue"
import tu1 from "@/assets/PersonnelMaterials/one.png"
import tu2 from "@/assets/PersonnelMaterials/two.png"
import tu3 from "@/assets/PersonnelMaterials/three.png"
import tu4 from "@/assets/PersonnelMaterials/four.png"
const aaa = (e) => {
  if (e == 0) {
    return tu1
  } else if (e == 1) {
    return tu2
  } else if (e == 2) {
    return tu3
  } else if (e >= 3) {
    return tu4
  }
}
const bbb = (e) => {
  if (e >= 3) {
    return HorizontalChartObj.value.colorList[3][0]
  } else {
    return HorizontalChartObj.value.colorList[e][0]
  }
}
const bbb1 = (e) => {
  if (e >= 3) {
    return HorizontalChartObj.value.colorList[3][1]
  } else {
    return HorizontalChartObj.value.colorList[e][1]
  }
}
const HorizontalChartObj = ref({
  DataList: [
    { name: "大豆", value: 300 },
    { name: "小麦", value: 536 },
    { name: "土豆", value: 500 },
    { name: "土豆", value: 350 },
    { name: "番茄", value: 300 },
    { name: "韭菜", value: 280 },
    { name: "油麦菜", value: 240 },
    { name: "青椒", value: 200 },
    { name: "大豆", value: 300 },
    { name: "小麦", value: 536 },
    { name: "土豆", value: 500 },
    { name: "土豆", value: 350 },
    { name: "番茄", value: 300 },
    { name: "韭菜", value: 280 },
    { name: "油麦菜", value: 240 },
    { name: "青椒", value: 200 }
  ],
  colorList: [
    ["rgba(249, 78, 78,.2)", "rgba(249, 78, 78)"],
    ["rgba(223, 136, 63,.2)", "rgba(223, 136, 63)"],
    ["rgba(212, 210, 71,.2)", "rgba(212, 210, 71)"],
    ["rgba(51, 216, 191,.2)", "rgba(51, 216, 191)"]
  ]
})
const pieChartObj = ref({
  radius: ["55%", "75%"],
  center: ["50%", "50%"],
  pieChartList: [
    {
      value: 100,
      name: "农作物一"
    },
    { value: 80, name: "农作物二" },
    { value: 60, name: "农作物三" },
    { value: 60, name: "农作物四" },
    { value: 60, name: "农作物五" }
  ],
  colorList: [
    ["rgba(69,246,190)", "rgba(69,246,190)"],
    ["rgba(241,158,80)", "rgba(241,158,80)"],
    ["rgba(89,197,247)", "rgba(89,197,247)"],
    ["rgba(42,197,197)", "rgba(42,197,197)"],
    ["rgba(232,95,95)", "rgba(232,95,95)"],
    ["rgba(102,153,255)", "rgba(102,153,255)"],
    ["rgba(178,102,255)", "rgba(178,102,255)"]
  ]
})
const PieLenderObj = ref({
  danwei: "亩",
  Data: [
    {
      value: 100,
      name: "农作物一"
    },
    { value: 80, name: "农作物二" },
    { value: 60, name: "农作物三" },
    { value: 60, name: "农作物四" },
    { value: 60, name: "农作物五" }
  ],
  colorList: [
    ["rgba(69,246,190,.1)", "rgba(69,246,190)"],
    ["rgba(241,158,80,.1)", "rgba(241,158,80)"],
    ["rgba(89,197,247,.1)", "rgba(89,197,247)"],
    ["rgba(42,197,197,.1)", "rgba(42,197,197)"],
    ["rgba(232,95,95,.1)", "rgba(232,95,95)"],
    ["rgba(102,153,255,.1)", "rgba(102,153,255)"],
    ["rgba(178,102,255,.1)", "rgba(178,102,255)"]
  ]
})
const xialaList = ref([
  {
    name: "全部",
    id: 1
  },
  {
    name: "一年级",
    id: 2
  },
  {
    name: "二年级",
    id: 3
  },
  {
    name: "三年级",
    id: 4
  },
  {
    name: "四年级",
    id: 5
  },
  {
    name: "五年级",
    id: 6
  }
])

const belowEmits = (e) => {
  console.log(e)
}
</script>
<style scoped lang="less">
.mateManent-box {
  background: url("@/assets/PersonnelMaterials/XXC_SCGL_2@2x.png") no-repeat
    center;
  background-size: 100% 100%;
  background-color: rgba(15, 75, 63);
  position: relative;
  .mateManentTitle1 {
    position: absolute;
    left: 30px;
    top: 1px;
  }
  .mateManentTitle2 {
    position: absolute;
    left: 10px;
    top: 51px;
  }
  .mateManentTitle3 {
    position: absolute;
    left: 46px;
    top: 96px;
  }
  .mateManentTitle4 {
    position: absolute;
    left: 10px;
    top: 306px;
  }
  .mateManentTitle5 {
    position: absolute;
    left: 10px;
    top: 567px;
  }
  .mateManentBox1 {
    width: 94px;
    height: 32px;
    position: absolute;
    right: 10px;
    top: 51px;
  }
  .mateManentUnit1 {
    position: absolute;
    right: 60px;
    top: 96px;
    color: #ffffff;
    font-size: 16px;
  }
  .mateManentUnit2 {
    font-weight: 600;
    position: absolute;
    right: 80px;
    top: 91px;
    font-size: 22px;
    color: #59f9e1;
  }
  .mateManentBox2 {
    width: 100%;
    height: 165px;
    // background-color: rgba(222, 220, 111, 0.5);
    position: absolute;
    top: 135px;
    display: flex;
    align-items: center;
    .Box2Image {
      margin-left: 30px;
      width: 148px;
      height: 148px;
      background: url("@/assets/PersonnelMaterials/HXT_2@2x.png") no-repeat
        center;
      background-size: 100% 100%;
      // background-color: red;
    }
    .Box2Lender {
      width: 148px;
      height: 100%;
      margin-left: 30px;
      // background-color: red;
    }
  }
  .mateManentBox3 {
    width: 90%;
    height: 225px;
    position: absolute;
    top: 340px;
    left: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow-y: scroll;
    .mateManentBox3-item {
      width: 100%;
      height: 45px;
    }
  }
  .mateManentBox4 {
    margin-left: 10px;
    width: 380px;
    height: 32px;
    position: absolute;
    top: 595px;
    display: flex;
    color: #c9ffee;
    .box4T1 {
      text-align: center;
      width: 25%;
      font-size: 14px;
      line-height: 32px;
    }
  }
  .mateManentBox5 {
    margin-left: 10px;
    width: 380px;
    height: 325px;
    position: absolute;
    top: 625px;
    overflow-y: scroll;
    .InsectMBox5I {
      margin-bottom: 4.5px;
      width: 380px;
      height: 32px;
      background: url("@/assets/FourMonitoring/BJ_LB@2x.png") no-repeat center;
      background-size: 100% 100%;
      display: flex;
      color: #fff;
      .box4T1 {
        text-align: center;
        width: 25%;
        font-size: 14px;
        line-height: 32px;
        .box4T1Img {
          display: inline-block;
          text-align: center;
          width: 40px;
          height: 32px;
        }
      }
    }
  }
}
</style>
